<template>
  <v-container>
    <!--    顶部tab栏-->
    <v-toolbar
        color="white"
        flat
    >
      <template v-slot:extension>
        <v-tabs v-model="tab" slider-size="1" class="px-auto">
          <v-spacer></v-spacer>
          <v-tabs-slider color="primary"></v-tabs-slider>

          <v-tab key="0">
            密码登录
          </v-tab>
          <v-divider
              class="mx-2"
              vertical
          ></v-divider>
          <v-tab key="1">
            验证码登录
          </v-tab>
          <v-spacer></v-spacer>
        </v-tabs>
      </template>
    </v-toolbar>
    <!--tab item 1-->
    <v-tabs-items v-model="tab">
      <v-tab-item key="0">
        <v-card flat class="mt-10">
          <!--选择手机或者邮箱登录-->
          <v-card-subtitle class="py-0">
            <v-icon>mdi-cellphone</v-icon>
            /
            <v-icon size="26">mdi-email-outline</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="username0"
                          :rules="[rules.required]"
                          placeholder="请输入手机号或者邮箱账号"
                          v-model="loginData[0].username"
            ></v-text-field>
          </v-card-text>



          <v-card-subtitle class="py-0">
            <v-icon>mdi-lock-outline</v-icon>
          </v-card-subtitle>
          <v-card-text class="pb-1">
            <v-text-field class="py-0"
                          ref="password0"
                          :rules="[rules.required]"
                          placeholder="请输入密码"
                          v-model="loginData[0].password"
                          :type="loginForms[0].confirmEye?'input':'password'"
            >
              <template v-slot:append>
                <v-btn icon>
                  <v-icon size="30" v-if="loginForms[0].confirmEye" @click="loginForms[0].confirmEye=false">mdi-eye-outline</v-icon>
                  <v-icon size="30" v-else  @click="loginForms[0].confirmEye=true">mdi-eye-off-outline</v-icon>
                </v-btn>
              </template>
            </v-text-field>
          </v-card-text>
          <v-card-text class="mt-0 pt-0">
            <v-row class="mt-0">
              <v-col cols="12"  class="py-0">
                <v-checkbox class="mt-0 pt-0 mx-auto"
                            v-model="loginData[0].remember"
                            color="primary"
                >
                  <template v-slot:label>
                    <div>
                      记住我
                    </div>
                  </template>
                </v-checkbox>
              </v-col>
            </v-row>
            <v-row class="mt-0">
              <v-col cols="auto">
                <v-chip outlined color="primary" small to="/forget">忘记密码</v-chip>
              </v-col>
              <v-col cols="auto" class="ml-auto">
                <v-chip outlined color="primary" small to="/register">现在注册</v-chip>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
        <v-row align="center" justify="center" class="mt-15 mb-5">
          <v-col cols="7">
            <v-btn color="primary" rounded x-large width="100%" v-if="loginForms[0].posting">
              <v-progress-circular width="5" size="30" color="white" indeterminate></v-progress-circular>
            </v-btn>
            <v-btn color="primary" rounded x-large width="100%" @click="doLogin(0)" v-else>登录</v-btn>
          </v-col>

        </v-row>
      </v-tab-item>
      <!--tab item 2-->
      <v-tab-item key="1">
        <v-card flat>
          <v-card flat class="mt-10">

            <v-card-subtitle class="py-0">
              <v-icon>mdi-cellphone</v-icon>
            </v-card-subtitle>
            <v-card-text class="pb-1">
              <v-text-field class="py-0"
                            ref="username1"
                            :rules="[rules.required,rules.phone]"
                            placeholder="请输入手机号"
                            v-model="loginData[1].username"
                            @blur="loginForms[1].loginPhoneOK=rules.phone(loginData[1].username)===true"
              ></v-text-field>
            </v-card-text>

            <v-card-subtitle class="py-0">
              <v-icon>mdi-shield-lock-outline</v-icon>
            </v-card-subtitle>
            <v-card-text class="pb-1">
              <v-text-field class="py-0"
                            ref="verifyCode1"
                            :rules="[rules.required,rules.verifyCode]"
                            placeholder="请输入验证码"
                            v-model="loginData[1].verifyCode"
              >
                <template v-slot:append>
                  <v-chip small disabled v-if="fetchCode">
                    <v-progress-circular
                        size="15"
                        width="2"
                        indeterminate
                    ></v-progress-circular>
                  </v-chip>
                  <v-chip small :disabled="!loginForms[1].loginPhoneOK" @click="doGetVerifyCode" v-else>
                    获取验证码
                  </v-chip>
                </template>
              </v-text-field>
            </v-card-text>
            <v-card-text class="mt-0 pt-0">
              <v-row class="mt-0">
                <v-col cols="12"  class="py-0">
                  <v-checkbox class="mt-0 pt-0 mx-auto"
                              v-model="loginData[1].remember"
                              color="primary"
                  >
                    <template v-slot:label>
                      <div>
                        记住我
                      </div>
                    </template>
                  </v-checkbox>
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="auto">
                  <v-chip outlined color="primary" small to="/forget">忘记密码</v-chip>
                </v-col>
                <v-col cols="auto" class="ml-auto">
                  <v-chip outlined color="primary" small to="/register">现在注册</v-chip>
                </v-col>
              </v-row>

            </v-card-text>
          </v-card>
          <v-row align="center" justify="center" class="mt-15 mb-5">
            <v-col cols="7">
              <v-btn color="primary" rounded x-large width="100%" v-if="loginForms[1].posting">
                <v-progress-circular width="5" size="30" color="white" indeterminate></v-progress-circular>
              </v-btn>
              <v-btn color="primary" rounded x-large width="100%" @click="doLogin(1)" v-else>登录</v-btn>
            </v-col>
          </v-row>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </v-container>
</template>

<script>

import {printMsg, rules} from "../util/util";

export default {
  name: "Login",
  data: () => ({
    tab: '',
    loginData:[
      {
        username:'',
        password:'',
        remember: false,
      },
      {
        username:'',
        verifyCode:'',
        remember: false,

      },
    ],
    loginForms:[
      {
        confirmEye:false,
        posting:false
      },
      {
        loginPhoneOK:false,
        posting:false
      }
    ],

    rules:rules,
    fetchCode:false

  }),
  methods:{
    doGetVerifyCode(){
      this.fetchCode = true
      let data = {
        phone:this.loginData[1].username
      }
      this.$http.post("user/getVerifyCode", data, {}).then(res=>{
        this.fetchCode = false
        this.loginForms[1].loginPhoneOK = false
        this.$emit('toast',`【妆典】验证码是 ${res.data}，请妥善保管不要泄露。`,5000)
        this.loginData[1].verifyCode=res.data
      }).catch(res=>{
        this.fetchCode = false
        this.$emit('toast',res.msg)
      })
      // this.loginData[1].verifyCode=''
    },

    doLogin(index) {
      // 遍历forms对象中的键，拼接去取refs中对象然后调用validate验证
      let keys=Object.keys(this.loginData[index])
      let ok = false
      for (let key of keys) {
        if (this.$refs[key + '' + index]) {
          ok = this.$refs[key + '' + index].validate(true)
          if (!ok) return
        }
      }

      this.loginForms[index].posting = true
      let data = this.loginData[index]
      this.$http.post("user/login", data, {}).then(res=>{
        this.loginForms[index].posting = false
        this.$emit('toast','登录成功',1000)
        this.$store.commit('init',res.data)
        this.$store.commit('setToken',res.data.token)
        this.$http.updateAuth()
        window.localStorage.setItem("remember", data.remember)
        if (this.$store.getters.isAdmin){
          this.$router.replace('/admin/index')
          printMsg("admin User",this)
          return
        }

        if (this.$route.query.redirect) {
          this.$router.replace("/home/index?redirect=" + this.$route.query.redirect)
        }else{
          this.$router.replace('/home/index')
        }
      }).catch(res=>{
        this.loginForms[index].posting = false
        this.$emit('toast',res.msg)
      })
    }
  }
}
</script>

<style scoped>

</style>
